<template>
  <div class="min-h-screen bg-gray-50">
    详情弹窗
    <div v-if="showPopup" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg w-[800px] max-h-[90vh] flex flex-col">
        <!-- 标题区域 -->
        <div class="flex justify-between items-center p-6 border-b">
          <h2 class="text-2xl font-bold">比赛参与详情</h2>
          <button class="text-gray-500 hover:text-gray-700" @click="closePopup">
            <i class="fas fa-times text-xl"></i>
          </button>
        </div>

        <!-- 内容区域 -->
        <div class="flex-1 overflow-y-auto p-6">
          <!-- 比赛基本信息 -->
          <div class="mb-8">
            <h3 class="text-lg font-semibold mb-4 flex items-center">
              <i class="fas fa-trophy text-yellow-500 mr-2"></i>
              比赛基本信息
            </h3>
            <div class="grid grid-cols-2 gap-4">
              <div class="flex items-start">
                <span class="text-gray-500 w-24">比赛名称：</span>
                <span class="font-medium">{{ data.competitionName }}</span>
              </div>
              <div class="flex items-start">
                <span class="text-gray-500 w-24">比赛级别：</span>
                <span class="font-medium">{{ data.competitionLevel }}</span>
              </div>
              <div class="flex items-start">
                <span class="text-gray-500 w-24">比赛类型：</span>
                <span class="font-medium">{{ data.competitionType }}</span>
              </div>
              <div class="flex items-start">
                <span class="text-gray-500 w-24">举办单位：</span>
                <span class="font-medium">{{ data.competitionOrg }}</span>
              </div>
              <div class="flex items-start">
                <span class="text-gray-500 w-24">比赛日期：</span>
                <span class="font-medium">{{ data.competitionDates }}</span>
              </div>
            </div>
          </div>

          <!-- 参与信息 -->
          <div class="mb-8">
            <h3 class="text-lg font-semibold mb-4 flex items-center">
              <i class="fas fa-user-friends text-blue-500 mr-2"></i>
              参与信息
            </h3>
            <div class="grid grid-cols-2 gap-4">
              <div class="flex items-start">
                <span class="text-gray-500 w-24">参赛角色：</span>
                <span class="font-medium">{{ data.participationRole }}</span>
              </div>
              <div class="flex items-start">
                <span class="text-gray-500 w-24">所在团队：</span>
                <span class="font-medium">{{ data.team }}</span>
              </div>
              <div class="flex items-start">
                <span class="text-gray-500 w-24">指导教师：</span>
                <span class="font-medium">{{ data.teacher }}</span>
              </div>
            </div>
          </div>

          <!-- 获奖信息 -->
          <div class="mb-8">
            <h3 class="text-lg font-semibold mb-4 flex items-center">
              <i class="fas fa-medal text-yellow-500 mr-2"></i>
              获奖信息
            </h3>
            <div class="grid grid-cols-2 gap-4">
              <div class="flex items-start">
                <span class="text-gray-500 w-24">奖项级别：</span>
                <span class="font-medium text-red-600">{{ data.awardLevel }}</span>
              </div>
              <div class="flex items-start">
                <span class="text-gray-500 w-24">获奖时间：</span>
                <span class="font-medium">{{ data.awardDate }}</span>
              </div>
              <div class="flex items-start">
                <span class="text-gray-500 w-24">颁奖单位：</span>
                <span class="font-medium">{{ data.awardOrg }}</span>
              </div>
            </div>
          </div>

          <!-- 证明材料 -->
          <div>
            <h3 class="text-lg font-semibold mb-4 flex items-center">
              <i class="fas fa-file-alt text-green-500 mr-2"></i>
              证明材料
            </h3>
            <div class="grid grid-cols-2 gap-4">
              <div v-for="(cert, index) in certificates" :key="index" class="relative group">
                <div class="border rounded-lg p-4 hover:shadow-lg transition-shadow">
                  <img :src="cert.url" :alt="cert.name" class="w-full h-40 object-cover rounded-lg mb-2"
                    @click="previewImage(cert.url)" />
                  <div class="text-sm">
                    <p class="font-medium truncate">{{ cert.name }}</p>
                    <p class="text-gray-500">上传时间：{{ cert.uploadTime }}</p>
                  </div>
                  <button
                    class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md opacity-0 group-hover:opacity-100 transition-opacity"
                    @click="downloadCertificate(cert)">
                    <i class="fas fa-download text-gray-600"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 底部操作栏 -->
        <div class="border-t p-6 flex justify-end space-x-4">
          <button class="px-4 py-2 bg-blue-600 text-white flex items-center" @click="exportPDF">
            <i class="fas fa-file-pdf mr-2"></i>
            导出 PDF
          </button>
          <button class="px-4 py-2 border border-gray-300 text-gray-700 flex items-center" @click="closePopup">
            <i class="fas fa-times mr-2"></i>
            关闭
          </button>
        </div>
      </div>

      <!-- 图片预览 -->
      <div v-if="previewUrl" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50"
        @click="previewUrl = ''">
        <img :src="previewUrl" alt="预览图片" class="max-w-[90%] max-h-[90vh] object-contain" />
      </div>
    </div>

    <div class="ml-10 p-8 " style="min-width: 1080px; padding: 2rem;">
      <div ref="contentDiv" class="bg-white rounded-lg shadow-sm p-6"
        style="min-width: 1080px; margin-left: 120px; height: 650px;">
        <!-- 状态筛选 -->
        <div class="flex gap-4 mb-6">
          <button v-for="tab in tabs" :key="tab.value" @click="currentTab = tab.value" :class="{
            'bg-blue-500 text-white': currentTab === tab.value,
            'bg-gray-100 text-gray-600': currentTab !== tab.value,
            'rounded-md': true
          }" class="px-4 py-2 text-sm font-medium whitespace-nowrap">
            {{ tab.label }}
          </button>
        </div>
        <!-- 表格 -->
        <div class="overflow-x-auto table-container">
          <table class="min-w-full">
            <thead class="bg-gray-50">
              <tr>
                <th v-for="header in tableHeaders" :key="header"
                  class="py-3.5 px-4 text-left text-sm font-medium text-gray-900">
                  {{ header }}
                </th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
              <tr v-for="item in paginatedTableData" :key="item.id">
                <td class="py-4 px-4 text-sm text-gray-900">{{ item.name }}</td>
                <td class="py-4 px-4 text-sm text-gray-600">{{ item.participater }}</td>
                <td class="py-4 px-4 text-sm text-gray-600">{{ item.uploadTime }}</td>
                <td class="py-4 px-4 text-sm text-gray-600">{{ item.mainOrganizer }}</td>
                <td class="py-4 px-4">
                  <div class="flex items-center gap-3">
                    <template v-if="currentTab === 'pending'">
                      <button @click="approve(item)"
                        class="px-3 py-1 text-sm text-white bg-green-500 rounded-md whitespace-nowrap">通过</button>
                      <button @click="reject(item)"
                        class="px-3 py-1 text-sm text-white bg-red-500 rounded-md whitespace-nowrap">不通过</button>
                    </template>
                    <button @click="openDetail(item)"
                      class="px-3 py-1 text-sm text-white bg-blue-500 rounded-md whitespace-nowrap">详情</button>
                    <template v-if="currentTab === 'approved'">
                      <span class="flex items-center gap-1 text-green-600">
                        <i class="iconfont icon-gou1"></i>
                        <i class="fas fa-check-circle"></i>
                        <span class="text-sm">已通过</span>
                      </span>
                    </template>
                    <template v-if="currentTab === 'rejected'">
                      <span class="flex items-center gap-1 text-red-600">
                        <i class="fas fa-times-circle"></i>
                        <i class="iconfont icon-chacha"></i>
                        <span class="text-sm">未通过</span>
                      </span>
                    </template>
                  </div>
                </td>
              </tr>
            </tbody>

          </table>
        </div>
        <!-- 分页 -->
        <div class="flex items-center justify-between mt-6">
          <div class="flex items-center gap-2">
            <div class="relative">
              <div class="px-3 py-1 text-sm border rounded-md !rounded-button whitespace-nowrap flex items-center gap-2">
                共 {{ itemsPerPage }} 条信息
                <i class="fas fa-chevron-down text-xs"></i>
              </div>
            </div>
          </div>

          <div class="flex item-center gap-2">
            <el-pagination background layout="prev, pager, next" :total="100">
            </el-pagination>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
  

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue';
const contentDiv = ref<HTMLElement>();

const previewUrl = ref('');
const showPopup = ref(false);
const data = ref({});
const certificates = ref([
  {
    name: '全国大学生数学建模竞赛一等奖证书.pdf',
    url: 'https://ai-public.mastergo.com/ai/img_res/029e4d078ed517e8e625619bbf1e2a17.jpg',
    uploadTime: '2023-10-21 14:30',
  },
  {
    name: '比赛参与证明.pdf',
    url: 'https://ai-public.mastergo.com/ai/img_res/9e613bb6ed66ee125c88d350144a7d4d.jpg',
    uploadTime: '2023-10-21 14:31',
  }
]);

const fetchData = async () => {
  try {
    const response = await fetch('https://example.com/api/competition-data'); // 替换为你的后端接口
    data.value = await response.json();
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};



const closePopup = () => {
  showPopup.value = false;
};

const previewImage = (url: string) => {
  previewUrl.value = url;
};

const downloadCertificate = (cert: { name: string; url: string }) => {
  // 下载证书的逻辑
};

const exportPDF = () => {
  // 导出PDF的逻辑
};

const currentTab = ref('pending');
const tabs = [
  { label: '审核中', value: 'pending' },
  { label: '已通过', value: 'approved' },
  { label: '未通过', value: 'rejected' }
];
const tableHeaders = ['比赛名称', '参与学生', '上传时间', '主办方', '操作'];
const currentCompetition = reactive({
  name: '',
  participater: '',
  uploadTime: '',
  mainOrganizer: ''
});

const openDetail = (item: any) => {
  currentCompetition.name = item.name;
  currentCompetition.participater = item.participater;
  currentCompetition.uploadTime = item.uploadTime;
  currentCompetition.mainOrganizer = item.mainOrganizer;
  showPopup.value = true;
  fetchData();
};

const tableData = [
  {
    id: 1,
    name: 'ICPC-ACM全国大学生程序竞赛',
    participater: 'ICPC-ACM组织会',
    uploadTime: '2024-11-14',
    mainOrganizer: 'ICPC-ACM组织会'
  },
  {
    id: 2,
    name: '全国大学生挑战赛',
    participater: '全国大学生组织会',
    uploadTime: '2024-11-14',
    mainOrganizer: '全国大学生组织会'
  },
];

const currentPage = ref(1);
const itemsPerPage = ref(50);  
const jumpToPage = ref(1);

const paginatedTableData = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage.value;
  const end = start + itemsPerPage.value;
  return tableData.slice(start, end);
});

const totalPages = computed(() => {
  return Math.ceil(tableData.length / itemsPerPage.value);
});

const previousPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

const goToPage = (page: number) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
    jumpToPage.value = page;
  }
};

const approve = (item: any) => {
  // 处理通过按钮的点击事件，例如更新状态
  console.log('通过:', item);
};


const reject = (item: any) => {
  // 处理不通过按钮的点击事件，例如更新状态
  console.log('不通过:', item);
};

const setContentWidth = () => {
  if (contentDiv.value) {
    const windowWidth = window.innerWidth;
    contentDiv.value.style.width = `${windowWidth * 0.75}px`;
    contentDiv.value.style.marginLeft = `${windowWidth * 0.1}px`;
  }
};
onMounted(() => {
  setContentWidth();
  window.addEventListener('resize', setContentWidth);
});


</script>
  

<style scoped>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
    
    